<template>
  <div>
    <div>
      <!-- 头部导航 -->
      <van-nav-bar placeholder :fixed="true">
        <template #left>
          <img src="../../assets/toutiao_logo.png" alt="" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" />
        </template>
      </van-nav-bar>
      <!-- 标签栏 -->
      <van-tabs v-model="active" animated sticky offset-top="1.2266667rem">
        <van-tab
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id"
          :title="obj.name"
        >
          <!-- 文章列表 -->
          <article-list :channelId="active"> </article-list>
        </van-tab>
      </van-tabs>
      <!-- 底部反馈面板 -->
      <van-action-sheet
        v-model="$store.state.homeArticleActionShow"
        :actions="Arraction"
        :cancel-text="cancelText"
        @select="onSelect"
        @cancel="cancelFn"
        get-container="body"
      />
    </div>
  </div>
</template>

<script>
import { getUserChannelListAPI, dislikeArticleAPI } from '@/api'
import ArticleList from './ArticleList.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      userChannelList: [], // 用户频道列表
      show: false,
      Arraction: [], // 反馈数据
      cancelText: '取消'
    }
  },
  computed: {
    ...mapState(['fristAction', 'secondActions', 'actionArtId'])
  },
  async created () {
    const res = await getUserChannelListAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels
    // 默认一级反馈
    this.Arraction = this.fristAction
  },
  components: {
    ArticleList
  },
  methods: {
    ...mapMutations(['changehomeArticleActionShow']),
    async onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.name === '反馈垃圾内容') {
        this.Arraction = this.secondActions
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        // 调用接口
        const res = await dislikeArticleAPI(this.actionArtId)
        console.log(res)
        this.changehomeArticleActionShow(false)
      }
      console.log(123)
    },
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changehomeArticleActionShow(true)
        this.cancelText = '取消'
        this.Arraction = this.fristAction
      }
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .van-nav-bar__left img {
  width: 100px;
  height: 30px;
}
</style>
